import React, { useEffect, useState } from 'react'
import {Table,Button,Tree,Modal} from 'antd'
import {DeleteOutlined,UnorderedListOutlined,ExclamationCircleOutlined} from '@ant-design/icons'
import axios from 'axios';
const { confirm } = Modal;

export default function RoleLIst() {
  const [dataSource,setDataSource]=useState([])
  const [dataList,setDataList]=useState([])
  const [currentRight,setCurrentRight]=useState([])
  const [currentId,setCurrentId]=useState(0)
  // 对话框是否打开
  const [isModalOpen, setIsModalOpen] = useState(false);

 useEffect(()=>{
  axios.get("http://localhost:8000/roles").then(res=>{
    const list=res.data
    console.log(list);
    setDataSource(list)
  })
 },[])
 
 useEffect(()=>{
  axios.get("http://localhost:8000/rights?_embed=children").then(res=>{
    const list=res.data
    console.log(list);
    setDataList(list)
  })
 },[])
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
    },
    {
      title: '操作',
      render:(item)=>{
      return <div>
         <Button danger shape="circle"   icon={<DeleteOutlined />} onClick={()=>showDeleteConfirm(item)} />
         <Button type="primary" shape="circle" icon={<UnorderedListOutlined/>} onClick={()=>{ 
          setIsModalOpen(true) 
          setCurrentRight(item.rights)
          setCurrentId(item.id)
          }} />
         <Modal title="权限分配" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <Tree
          checkable
          checkedKeys={currentRight}
          checkStrictly={true}
          onCheck={onCheck}
          treeData={dataList}
          />
      </Modal>
      </div>
      }
    },
  ];
  
  const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
      setCurrentRight(checkedKeys.checked)
      // console.log('onCheck', checkedKeys, info);
    };
  const showDeleteConfirm=(item)=>{
      confirm({
        title: '你确认要删除吗?',
        icon: <ExclamationCircleOutlined />,
        // content: 'Some descriptions',
        okType: 'danger',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          // console.log(item);
         deleteMethod(item)
        },
        onCancel() {
          console.log('取消');
        },
      });
    }
  const deleteMethod=(item)=>{
          // console.log(item);
          setDataSource(dataSource.filter(data=>data.id!==item.id))
          axios.delete(`http://localhost:8000/roles/${item.id}`)
  }
  const handleOk = () => {
    // console.log(currentRight);
    setIsModalOpen(false);
    // 同步datasource
      setDataSource(dataSource.map(item=>{
        if(item.id===currentId){
          return{
            ...item,
            rights:currentRight
          }
        }
        return item
      }))
    // 同步后端
    axios.patch(`http://localhost:8000/roles/${currentId}`,{
      rights:currentRight
    })
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
   <div>
     <Table dataSource={dataSource} columns={columns} rowKey='id'></Table>
   </div>
  )
}
